<template  >
  <div>
    <el-row
      :gutter="20"
      v-loading="loading"
    >
      <el-col :span="12">
        <el-descriptions title="学生基本信息">
          <el-descriptions-item label="学生姓名">{{ form.name }}
          </el-descriptions-item>
          <el-descriptions-item label="出生日期">
            <el-tag
              v-if="this.form.birthday == null || this.form.birthday == ''"
              size="small"
            >null</el-tag>
            <span
              v-else
              type="primary"
            > {{ form.birthday }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="毕业院校">
            <el-tag
              v-if="this.form.college == null || this.form.college == ''"
              size="small"
            >null</el-tag>
            <span
              v-else
              type="primary"
            > {{ form.college }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="学历">
            <el-tag
              v-if="this.form.education == null || this.form.education == ''"
              size="small"
            >暂无</el-tag>
            <span
              v-else
              type="primary"
            > {{ form.education }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            <el-tag
              v-if="this.form.sex == 0"
              size="small"
            >男</el-tag>
            <el-tag
              v-else
              size="small"
              type="danger"
            >女</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="毕业时间">
            <el-tag
              v-if="
                this.form.graduate_date == null || this.form.graduate_date == ''
              "
              size="small"
            >空</el-tag>
            <span v-else> {{ form.graduate_date }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <el-button
          type="success"
          plain
          size="small"
          icon="el-icon-edit"
          @click="showEdit"
        >修改基本信息</el-button>
      </el-col>
      <el-col :span="9">
        <div class="imgBlock">
          <el-image
            v-if="form.photo != null && form.photo != ''"
            :src="form.photo"
            fit="fill"
          >
          </el-image>
          <img
            v-else
            src="../../assets/images/emptyImg.png"
            title="暂无logo"
          />
        </div>
      </el-col>
    </el-row>
    <Edit
      v-if="editParam.visible"
      :editParam="editParam"
      @doUpdate="doUpdate"
    />
  </div>
</template>
<script>
import Edit from '@/components/Edit.vue'

export default {
  name: 'StudentInfo',
  components: {
    Edit,
  },
  data() {
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8|9][0-9]{9}$/
      if (!value) {
        return callback(new Error('请输入手机号'))
      }
      // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
      // 所以我就在前面加了一个+实现隐式转换
      if (!Number.isInteger(+value)) {
        callback(new Error('请输入数字值'))
      } else {
        if (phoneReg.test(value)) {
          callback()
        } else {
          callback(new Error('手机号码格式/长度不正确'))
        }
      }
    }
    return {
      form: {},
      items: [
        {
          type: 'text',
          label: '姓名',
          prop: 'name',
          name: 'name',
          placeholder: '请输入姓名',
        },
        {
          type: 'date',
          label: '出生日期',
          prop: 'birthday',
          name: 'birthday',
          placeholder: '请输入出生日期',
        },
        {
          type: 'text',
          label: '毕业院校',
          prop: 'college',
          name: 'college',
          placeholder: '请输入毕业院校',
        },
        {
          type: 'select',
          label: '学历',
          prop: 'education',
          name: 'education',
          placeholder: '请输入学历',
          options: [],
        },
        {
          type: 'text',
          label: '手机号码',
          prop: 'phone',
          name: 'phone',
          placeholder: '请输入手机号码',
        },
        {
          type: 'radio',
          label: '性别',
          prop: 'sex',
          name: 'sex',
          placeholder: '请输入性别',
          options: [
            {
              value: 0,
              label: '男',
            },
            {
              value: 1,
              label: '女',
            },
          ],
        },
        {
          type: 'file',
          label: '照片',
          prop: 'photo',
          name: 'photo',
          placeholder: '照片',
        },

        {
          type: 'date',
          label: '毕业时间',
          prop: 'graduate_date',
          name: 'graduate_date',
          placeholder: '请输入毕业时间',
        },
      ], //
      // 修改相关
      editParam: {
        visible: false,
        close: this.close,
        callback: this.getInfo,
        title: '修改信息',
        editForm: null, //传递form表单数据
        rules: {
          name: [
            {
              required: true,
              message: '姓名不能为空',
            },
          ],
          phone: [
            {
              required: true,
              validator: checkPhone,
              trigger: 'blur',
            },
          ],
        }, //表单规则
        items: [],
      },
      loading: true, //图片加载
    }
  },
  mounted() {
    this.getInfo()

    this.getDictList({
      type_id: 2,
    })
  },
  methods: {
    getDictList(form) {
      this.postRequest('/dict/query/', {
        ...form,
      }).then((res) => {
        let arr = []
        res.forEach((item) => {
          let p = {
            value: item.dict_key,
            label: item.dict_val,
          }
          arr.push(p)
          console.log(arr, '字典===')
        })
        this.items.forEach((item) => {
          if (item.type == 'select' && item.name == 'education') {
            item.options = arr
          }
        })
      })
    },

    // 查询学生详情信息
    getInfo() {
      this.getRequest('/student/info').then((res) => {
        if (res) {
          this.form = res.obj

          setTimeout(() => {
            for (let key in this.form) {
              if (this.form[key] == null || this.form[key] == '') {
                // this.$set(this.form, key, "");
                this.$notify({
                  title: '提示',
                  message: '请及时完善基本信息',
                  type: 'warning',
                })
              }
            }
            this.loading = false
            console.log(this.form, '详情信息11111')
          }, 500)
        }
      })
    },

    // 修改确定
    doUpdate(flag) {
      console.log(flag, '子组件传递的，检验表单 ')
      if (flag) {
        let param = this.form
        if (this.form.single) {
          param.single = 'Y'
        } else {
          param.single = 'N'
        }
        console.log(this.editParam.editForm, '表单表单')
        this.putRequest('/student/', this.editParam.editForm).then((res) => {
          if (res.code == 200) {
            console.log(res, '成功成功')
            this.$message.success(res.message)
            this.editParam.visible = false
            this.getInfo()
          }
        })
      }
    },
    //展示修改表单
    showEdit() {
      this.editParam.visible = true
      console.log(this.form, '表单')
      this.editParam.items = JSON.parse(JSON.stringify(this.items))
      this.editParam.editForm = JSON.parse(JSON.stringify(this.form))
    },
    // 关闭弹出框
    close() {
      this.editParam.visible = false
    },
  },
}
</script>
<style>
.imgBlock {
  width: 250px;
  height: 250px;
  margin: 50px;
}

.imgBlock .el-image {
  width: 250px;
  /* height: 250px; */
}

.imgBlock img {
  width: 250px;
  height: 250px;
}

.el-descriptions__header {
  text-align: center;
  margin: 50px;
  position: relative;
}

.el-descriptions__title {
  font-size: 20px;
  position: absolute;
  left: 40%;
}

.el-descriptions-item__label:not(.is-bordered-label) {
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  padding: 0 3px;
  color: #023344;
}

.el-descriptions-item__content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}
</style>